<template>
	<view>
		<view class="title" @click="handleChangeDate">
		  {{today}}<u-icon name="arrow-down"></u-icon>
		</view>
		<view class="content">
			<u-cell-group>
				  <u-cell-item v-for="item in list" :key="item.id" @click="handlePreview(item)">
				    <template v-slot:title>
				  打卡时间：{{formatTime(item.checkTime)}}
				    </template>
				    <template v-slot:label>
				  <!--这里的remark就是打卡状态名称，根据checkTypeId获取对应的颜色样式加上 -->
				  <u-tag :text="item.remark" :type="checkTypeList[item.checkTypeId]" />
				    </template>
				  </u-cell-item>
			</u-cell-group>
		</view>
		<u-calendar v-model="show" @change="handleDateChange" mode="date"></u-calendar>
	</view>
</template>

<script>
	import {getCheckList} from '@/api/user-api.js'
	export default{
	  data(){
	    return {
	      today:new Date(),
		  list:[],
		  checkTypeList:{
		    "0":"success",//正常的上下班打卡按照时间是否过12点来分开
		    "1":"error",//只有在考勤范围内我们来确定是否是迟到，在范围内切过了上班时间
		    "2":"error",//在范围内且没到下班时间并且过了中午
		    "3":"warning"//如果不在考勤范围内
		  },
		  show:false
	    }
	  },
	  async onShow(){
	    let d = new Date();//拿到当前时间
	    let year = d.getFullYear();//年份
	    let month = d.getMonth()+1;//月份
	    let date = d.getDate();//天
	    this.today = `${year}-${month<10?("0"+month):month}-${date<10?("0"+date):date}`
		await this.getCheckListAll(this.today)
	  },
	  computed:{
	    formatTime(){
	      return function(time){
	        let d = new Date(Number(time))
	        return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
	      }
	    }
	  },
	  methods:{
	    async getCheckListAll(date){
	      let res = await getCheckList({
	        date
	      })
	      console.log(res.data)
	      if(res.data.code == 200){
	        this.list = res.data.data.list
	      }
	    },
		async handleChangeDate(){
			this.show = true;
		},
		async handleDateChange(date){
		  console.log(date)
		  this.today = date.result
		  await this.getCheckListAll(this.today)
		},
		handlePreview(item){
		  console.log(item)
		  //小程序里面跳页只能用？进行拼接参数，在新页面的onLoad函数中直接能拿到对象
		  uni.navigateTo({
		    url:`/pages/me/check-info?id=${item.id}`
		  })
		}
	  }
	}
</script>

<style lang="scss" scoped>
	.title{
		text-align: center;
		padding: 10rpx 30rpx;
		border-bottom:1rpx solid #eee;
		box-shadow: 0rpx 4rpx 20rpx 0rpx #ddd;
	}
</style>